<template>
	<view>
		<view class="item_one">
			<view class="title">
				<span>*</span>
				举报原因
			</view>
			<view class="itflex">
				<view class="it" :class="params.reason == item.dictValue ? 'act' : ''" v-for="(item, index) in btnList" :key="index"
				@click="chnageType(item)">
					<view class="">{{ item.dictValue }}</view>
				</view>
			</view>
		</view>
		<view class="item_one">
			<view class="title flex_jc_sb">
				详细描述
				<view class="subtitle">您还可以输入{{ 500 - params.remark.length }}字</view>
			</view>
			<textarea v-model="params.remark" placeholder="请输入举报原因" maxlength="500"></textarea>
			<view class="imgs">
				<view class="img" v-for="(item, index) in imgList" :key="index">
					<image :src="item" mode="aspectFill"></image>
					<image class="xx" src="/static/del.png" mode="" @click="removeImg(index)"></image>
				</view>
				<view class="add flex_jc_cent" @click="upload" v-if="imgList.length < 9">
					<view class="">
						<uni-icons type="camera" size="24" color="#D1D1D6"></uni-icons>
						<view class="tt">上传图片</view>
					</view>
				</view>
			</view>
		</view>
		<view class="footer_btn" @click="handleTJ()">
			<view class="cont">
				<view class="btn">确认</view>
			</view>
		</view>
		<uni-popup ref="popup" type="center" :is-mask-click="false">
			<view class="popup">
				<view class="textss">
					<view class="">您的举报已反馈，</view>
					处理结果将通过底部“通知”反馈给您
				</view>

				<view class="btn" @click="goback">我知道了</view>
			</view>
		</uni-popup>
	</view>
</template>
<script>
import { reportAdd, getdict } from '@/common/http.api.js';
export default {
	data() {
		return {
			params: {
				type: 1, //1报价 2出价
				id: undefined,
				reason: '',
				remark: '',
				images: ''
			},
			imgList: [],
			btnList: []
		};
	},
	onLoad(option) {
		this.params.type = option.type;
		this.params.id = option.id;
		getdict('user_report_reason').then((res) => {
			if (res.code == 200) {
				res.data.forEach((item) => {
					item.isclick = false;
				});
				this.params.reason = res.data[0].dictValue;
				this.btnList = res.data;
			}
		});
	},
	methods: {
		chnageType(item){
			this.params.reason = item.dictValue
		},
		goback(){
			uni.navigateBack()
		},
		upload() {
			this.$uploadone(9).then((res) => {
				this.imgList = res;
			});
		},
		removeImg(index) {
			this.imgList.splice(index, 1);
		},
		handleTJ() {
			if (this.imgList.length != 0) {
				this.params.images = this.imgList.join(',');
			}
			reportAdd(this.params).then((res) => {
				if (res.code == 200) {
					this.$refs.popup.open();
				}
			});
		}
	}
};
</script>

<style lang="scss">
.popup {
	width: 640rpx;
	height: 420rpx;
	background: #ffffff;
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	padding: 120rpx 0rpx 54rpx;
	box-sizing: border-box;
	.textss {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #11192d;
		text-align: center;
	}
	.btn {
		width: 320rpx;
		height: 90rpx;
		background: linear-gradient(270deg, #ff6f07 0%, #ffa666 100%);
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 30rpx;
		color: #ffffff;
		text-align: center;
		line-height: 90rpx;
		margin: 80rpx auto;
	}
}
.item_one {
	width: 710rpx;
	background: #ffffff;
	border-radius: 12rpx 12rpx 12rpx 12rpx;
	padding: 32rpx 20rpx 10rpx 20rpx;
	box-sizing: border-box;
	margin: 20rpx auto;
	.title {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #000000;
		margin-bottom: 20rpx;
		span {
			color: #fe1515;
		}
		.subtitle {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #aeaeae;
		}
	}
	.itflex {
		display: flex;
		flex-wrap: wrap;
	}
	.it {
		height: 60rpx;
		background: #f9f9f9;
		padding: 0rpx 26rpx;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		margin-bottom: 20rpx;
		margin-right: 20rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #979797;
		line-height: 60rpx;
		text-align: center;
		border: 1px solid #f9f9f9;
	}
	.act {
		color: #ff6f07;
		background: rgba(255, 242, 233, 0.91);
		border: 1px solid #ff6f07;
	}

	textarea {
		width: 100%;
		font-weight: 400;
		font-size: 28rpx;
	}
	// .it:nth-child(3n){
	// 	margin-right: 0rpx;
	// }
	.imgs {
		display: flex;
		flex-wrap: wrap;
		margin-top: 30rpx;
		.add {
			width: 120rpx;
			height: 120rpx;
			background: #ffffff;
			border-radius: 12rpx;
			border: 1px solid #d1d1d6;
			text-align: center;
			.tt {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #aeaeae;
			}
		}
		.img {
			width: 120rpx;
			height: 120rpx;
			border-radius: 12rpx;
			border: 1px solid #d1d1d6;
			margin-right: 12rpx;
			margin-bottom: 20rpx;
			position: relative;
			image {
				width: 120rpx;
				height: 120rpx;
				border-radius: 12rpx;
			}
			.xx {
				width: 32rpx;
				height: 32rpx;
				position: absolute;
				right: -15rpx;
				top: -15rpx;
			}
		}
		.img:nth-child(5n) {
			margin-right: 0rpx;
		}
	}
}
</style>
